<template>
  <div class="board-chat">
    <ul class="chat-record" ref="chatRecord">
      <li v-show="showMoreBtn" class="more-message" @click="getMoreMessage">查看更多消息...</li>
      <li
        v-for="(item,index) of message"
        :key="index"
        :class="[item.sender==userAccount?'chat-box-right':'chat-box-left']"
      >
        <img v-if="item.sender!=userAccount" class="people-img" :src="item.user_img" alt />
        <div class="msg-content" :class="{'content-right':item.sender==userAccount}">
          <span class="date-info">{{item.user_name}}&nbsp;&nbsp;{{item.cur_time}}</span>
          <div
            class="css_text"
            :class="[item.sender==userAccount?'css_text_right':'css_text_left']"
          >
            <span class="voice-content">{{item.content}}</span>
          </div>
        </div>
        <img v-if="item.sender==userAccount" class="people-img" :src="item.user_img" alt />
      </li>

      <!-- <li class="chat-box-right">
        <div class="msg-content content-right">
          <span class="date-info">lyric&nbsp;&nbsp;2017/02/03 12:00</span>
          <div class="css_text css_text_right">
            <span class="voice-content">1564151919519</span>
          </div>
        </div>
        <img class="people-img" :src="src" alt />
      </li>
      <li class="chat-box-left">
        <img class="people-img" :src="src" alt />
        <div class="msg-content content-left">
          <span class="date-info">lyric&nbsp;&nbsp;2017/02/03 12:00</span>
          <div class="css_text css_text_left">
            <span class="voice-content">askdljsalkdj啊实打实的委屈而二哥是人工更换发给换地方回复好ksaj</span>
          </div>
        </div>
      </li>-->
    </ul>
    <div class="chat-operate">
      <input type="text" class="textarea_send" v-model="inputMessage" @keyup.enter="postMessage" />
      <div class="chat-btn">
        <span class="post-msg" @click="postMessage">发送（Enter）</span>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import { clearTimeout, setTimeout } from 'timers';
// import { Message } from "element-ui";
const btnOptions = ["屏蔽日志", "屏蔽信息"];
var recorderr;
export default {
  components: {},
  props: ["chatInfo"],
  data() {
    return {
      src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563254777671&di=9420464b181c7654f33aa7ea03c93980&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F18%2F20150418H4459_VmtX3.jpeg',
      //   hideWhat: [],
      //   btnSel: btnOptions, //checkbox选择框
      //   isCheckActive: "",
      userAccount: window.localStorage.getItem("account"),
      userImg: window.localStorage.getItem("userimg"),
      userName: window.localStorage.getItem("username"),
      roomId: this.$route.query.id, //房间id
      inputMessage: "", //文字消息内容
      nowPage: 1,
      pageNum: 20,
      pageTotalNum: 1,
      message: [], //消息数组
      showMoreBtn: true, //更多消息按钮
    };
  },
  watch: {
    chatInfo: {
      //深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        this.message.push(newV);
        this.$nextTick(() => {
          this.scrollToBottom();
        });
      },
      deep: true
    }
  },
  mounted() {
    this.requestChatRecord();
  },
  methods: {
    checkLog(item) {
      if (this.follow == null) {
        this.$emit("logDetail", { fileId: item.file_id, imgIndex: item.img_url, drawData: item.draw_data });
      } else {
        Message({
          showClose: true,
          message: "处于跟随状态，不能查看日志",
          type: "warning",
          duration: 2000
        });
      }
    },
    // 获取聊天记录
    async requestChatRecord() {
      let data = {
        query: {
          roomid: this.roomId
        },
        page:
        {
          page: this.nowPage,
          rows: '10',
          sidx: 'id',
          sord: "desc"
        }
      };
      // 获取房间路由
      let res = await this.http.post("api/page/view_xnsjy_chat_message_user", data);
      if (res.info.rows.length < 10) { // 已经获取完所有聊天记录
        this.showMoreBtn = false;
      }
      for (let i = 0; i < res.info.rows.length; i++) {
        this.message.unshift(res.info.rows[i])
      }
      if (this.nowPage == 1) {
        this.scrollToBottom();
      }
      console.log('message：', this.message);
    },
    // 发送消息按钮被点击
    postMessage() {
      while (this.inputMessage.lastIndexOf(" ") >= 0) {
        this.inputMessage = this.inputMessage.replace(" ", "");
      }
      if (this.inputMessage.length == 0) {
        this.$message.warning("消息不能为空");
      } else {
        let data = {
          type: 'chatInfo',
          data: {
            sender: this.userAccount,
            roomid: this.roomId,
            content: this.inputMessage, //聊天内容
            type: "0" //聊天类型（文字内容）
          },
          user_img: this.userImg,
          user_name: this.userName
        };
        this.$parent.websocketsend(data);
        this.inputMessage = "";
      }
    },
    // 分页获取聊天消息
    getMoreMessage() {
      this.nowPage++;
      this.requestChatRecord();
    },
    // 滚动条出现在最底部
    scrollToBottom() {
      this.$nextTick(() => {
        this.$refs.chatRecord.scrollTop = this.$refs.chatRecord.scrollHeight;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.board-chat {
  height: 100%;
  position: relative;
  .chat-record {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 100px;
    background-color: #e5e5e5;
    overflow: auto;
    .more-message {
      font-size: 10px;
      text-align: center;
      margin-top: 5px;
      cursor: pointer;
      color: #31a7f0;
    }
    .chat-box-left {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin: 8px 0;
    }
    .chat-box-right {
      display: flex;
      justify-content: flex-end;
      align-items: flex-start;
      margin: 8px 0;
    }
    .people-img {
      width: 40px;
      margin: 8px;
      -webkit-user-select: none;
      /*谷歌 /Chrome*/
      -moz-user-select: none;
      /*火狐/Firefox*/
      -ms-user-select: none;
      /*IE 10+*/
      user-select: none;
    }
    .content-right {
      text-align: right;
    }
    .msg-content {
      .date-info {
        margin-top: 6px;
        display: block;
        font-size: 10px;
        color: #606060;
      }
      .css_text {
        height: auto;
        border-radius: 4px;
        margin: 6px 3px 3px 3px;
        padding: 10px;
        font-size: 12px;
        position: relative;
        letter-spacing: 1px;
        color: #000;
        width: auto;
        display: inline-block;
        span {
          display: inline-block;
          max-width: 195px;
          word-wrap: break-word;
          text-align: left;
          line-height: 19px;
          // font-weight: bold;
        }
        // 日志
        .log-box {
          position: relative;
          text-align: left;
          p {
            margin: 5px 0;
            font-size: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
          }
          .log-title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 185px;
            .log-btn {
              cursor: pointer;
            }
            .log-title {
              // font-weight: bold;
              color: #ee6133;
            }
          }
          .log-date {
            color: #666;
          }
          .log-name-slide {
            vertical-align: top;
            color: #666;
            display: block;
            width: 45px;
          }
          .log-file {
            max-width: 150px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .log-remark {
            width: 150px;
          }
        }
        // 签章
        .chain-box {
          position: relative;
          text-align: left;
          background-color: #fff;
          padding: 1px 10px;
          .chain {
            position: absolute;
            width: 60px;
            left: 70px;
            top: 0;
          }
          .log-title-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 175px;
            .log-btn {
              cursor: pointer;
            }
          }
          .log-file {
            font-size: 15px;
          }
          .log-center {
            text-align: center;
          }
          .log-name-slide {
            vertical-align: top;
            color: #666;
            display: inline-block;
            width: 45px;
          }
          .log-date {
            text-align: right;
          }
          .log-remark {
            width: 125px;
          }
        }
      }
      .css_text_right {
        background-color: #92e64a;
      }
      .css_text_left {
        background-color: #fff;
      }
      .css_text_left:before {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        left: -10px;
        border: 5px solid transparent;
        border-right-color: #fff;
      }
      .css_text_right:before {
        content: "";
        display: block;
        position: absolute;
        top: 5px;
        right: -10px;
        border: 5px solid transparent;
        border-left-color: #92e64a;
      }
      .voice-box {
        width: 195px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        padding-bottom: 2px;
        border-bottom: 1px solid #fff;
        .voice-second {
          font-size: 10px;
        }
        .voice-img {
          height: 12px;
        }
      }
      .voice-content {
        width: 195px;
        margin-top: 2px;
        padding-top: 2px;
      }
      .voice-box-left {
        border-bottom: 1px solid #9b9b9b;
      }
    }
  }
  .chat-operate {
    position: absolute;
    left: 0;
    right: 0;
    height: 100px;
    bottom: 0;
    padding: 0 5px;
    -webkit-user-select: none;
    /*谷歌 /Chrome*/
    -moz-user-select: none;
    /*火狐/Firefox*/
    -ms-user-select: none;
    /*IE 10+*/
    user-select: none;
    .textarea_send {
      background-color: #fff;
      width: 98%;
      height: 50%;
      outline: none;
      border-color: transparent;
      resize: none;
      margin-top: 6px;
    }
    .post-msg {
      cursor: pointer;
      color: #fff;
      border: 1px solid #ee6133;
      background-color: #ee6133;
      font-size: 9px;
      border-radius: 3px;
      height: 20px;
      line-height: 19px;
      padding: 0px 8px;
    }
    .chat-btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 5px;
      div {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .checkbox {
        position: relative;
        display: inline-block;
        width: 10px;
        height: 10px;
        border: 1px solid #ddd;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        cursor: pointer;
      }
      .checkbox-active {
        background-color: #ee6133;
        border: 1px solid #ee6133;
      }
      .checkbox:after {
        box-sizing: content-box;
        content: "";
        border: 1px solid #fff;
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 3px;
        position: absolute;
        top: 0px;
        transform: rotate(45deg) scaleY(0);
        width: 3px;
        transition: transform 0.15s ease-in 0.05s;
        transform-origin: center;
        transform: rotate(45deg) scaleY(1);
      }
      .label {
        cursor: pointer;
        display: inline-block;
        font-size: 9px;
        margin: 0 7px 0 5px;
      }
    }
    .yuyin-box {
      position: absolute;
      top: -35px;
      left: 3px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      display: inline-block;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      .yuyin-phone {
        cursor: pointer;
        color: #4c4c4c;
        padding: 2px 3px;
      }
      .yuyin-active {
        color: #ee6133;
      }
      .yuyin-tip {
        font-size: 10px;
        color: #ee6133;
        margin-right: 5px;
      }
    }
  }
}
</style>